<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="css/css.css">
    <link rel="stylesheet" href="css/index2.css">
    <!--<script type="text/javascript" src="http://lbsyun.baidu.com/apiconsole/register/activate?key=762e9bbc6c7f215de0bfd23249bb168b"></script>-->
    <!-- <script src="https://api.map.baidu.com/api?v=2.0&ak=2d91410e115e9d061e1b606f4cce7d1c&s=1"></script> -->

</head>

<body>
    <div class="big">

        <section>
            <div class="search">
                <img src="images/yuan.png" alt="">
                <input type="search" name="" value="" placeholder="搜索关键词" id="search">
            </div>
            <div class="list">
                <div class="list_left">
                    <p>列表</p>

                    <div id="triangle-down"></div>
                </div>
                <div class="list_right">
                    <a href="ditu.html" id="maptab">地图</a>
                    <div id="allmap"></div>


                </div>

            </div>


            <div class="details">
                <div class="details_top"></div>
                <div class="details_deep">
                    <select id="selected1">
                        <option value="地区">地区</option>
                        <option value="地区1">地区1</option>
                        <option value="地区1">地区2</option>
                        <option value="地区1">v地区3</option>
                    </select>
                    <select id="selected2">
                        <option value="距离">距离</option>
                        <option value="距离">等级</option>
                    </select>
                </div>
                
                <div id="view"></div>
                <!-- <div class="details_one">
                    <img src="images/img1.png" alt="">
                    <h1>梯田梯田</h1>
                    <p>浙江省丽水市云和县崇头镇</p>
                    <div class="details_four">
                        <p>AAAAA</p>
                    </div>

                    <div class="details_four_one">
                        <p>距离2.3km</p>
                    </div>
                </div>


                <div class="details_one">
                    <img src="images/img2.png" alt="">
                    <h1>民俗民宿</h1>
                    <p>浙江省丽水市云和县崇头镇</p>
                    <div class="details_four">
                        <ul>
                            <li>★</li>
                            <li>★</li>
                            <li>★</li>
                            <li>★</li>
                            <li>★</li>
                        </ul>
                    </div>

                    <div class="details_four_one">
                        <p>距离300m</p>
                    </div>
                </div>


                <div class="details_one">
                    <img src="images/img3.png" alt="">
                    <h1>美食美食</h1>
                    <p>浙江省丽水市云和县崇头镇</p>
                    <!-- <div class="details_four">
                    <p>AAAAA</p>
                </div> -->

                <div class="details_six">
                    <p>距离600m</p>
                </div>
            </div> -->
    </div>

    <div id="map" style="width: 100%; height:  300px;"></div>
    </section>


    </div>
</body>


<script src="js/rem.js"></script>

<!-- 引入 jQuery 库 -->
<script src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
    // document.getElementById('maptab').onclick = function () {
    //     // 百度地图API功能
    //     var map = new BMap.Map("map");    // 创建Map实例

    //     map.clearOverlays();


    //     var myIcon = new BMap.Icon("https://r.zjwist.com/images/pp.png", new BMap.Size(48, 98));
    //     var marker = new BMap.Marker(new BMap.Point(116.404, 39.915), {icon: myIcon});   // 创建标注
    //     map.addOverlay(marker);
    //     // map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);  // 初始化地图,设置中心点坐标和地图级别
    //       map.centerAndZoom(new BMap.Point(120.140996, 30.268082), 12);  // 初始化地图,设置中心点坐标和地图级别
    //     map.addControl(new BMap.NavigationControl());  //添加默认缩放平移控件

    //     map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
</script>
<script>
window.onload = function () {

    // 为jquery扩展了一个getUrlParam()方法  来获取url参数
    (function($) {
        $.getUrlParam = function(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return unescape(r[2]);
            return null;
        }
    })(jQuery);
    // 首次渲染页面
    getList()
        // 渲染函数
    function getList() {
        var key = $("#search").val()
        var areacode = $("#selected1").val();
        var sort = $("#selected2").val();
        var typeid = $.getUrlParam('typeid');
        var pid = $.getUrlParam('pid');
        var currgpsdb = $.getUrlParam('currgpsdb');

        $.getJSON("https://rapi.zjwist.com/wapdisplay/GetUnitList", {
            areacode: areacode, // 这个参数应该是从上一个页面来的
            pid: pid, // 这个参数应该是从上一个页面来的
            typeid: typeid, // 这个参数应该是从上一个页面来的
            currgpsdb: "", // 这个参数应该是从上一个页面来的
            pageindex: 1, // 这个参数是无限加载的, 加载一次就+1
            pagesize: 10,
            key: key,
            sort: sort
        }, function(data) {
            if (data.code == 0) {
                // 在这里面, 去渲染数据, 把数据组装起来
                var typeinfostr = "";
                $.each(data.data, function (index, typeinfo) {
                    typeinfostr += "<div class='details_one'>";
                    typeinfostr += "<img src='images/img1.png'>";
                    typeinfostr += "<h1>"+ typeinfo.unitname +"</h1>";
                    typeinfostr += "<p>"+ typeinfo.address +"</p>";
                    typeinfostr += "<div class='details_four'>";
                    typeinfostr += "<p>AAAAA</p>";
                    typeinfostr += "</div>";
                    typeinfostr += "<div class='details_four_one'>";
                    typeinfostr += "<p>距离"+ typeinfo.distance +"km</p>";
                    typeinfostr += "</div>";
                    typeinfostr += "</div>";
                }
                
                $("#view").html(typeinfostr);
            }
        });
    }
    // 搜索事件
    $("#search").on("keyup", function() {
            getList()
        })
        // 切换地区事件
    $("#selected1").on("change", function() {
            getList()
        })
        // 切换排序方式事件
    $("#selected1").on("change", function() {
        getList()
    })
    
}
</script>

</html>